<template>
  <div>
    <a-select
      v-if="!isSearchShow"
      name="menu-search"
      :placeholder="l('QuickMenu')"
      :dropdownMatchSelectWidth="false"
      class="menu-search"
      show-search
      allowClear
      @search="handleSearch"
      @change="onSelect"
      @blur="blur"
      v-model:value="selectedValue"
      :filter-option="false"
      :options="list"
      :not-found-content="false"
      autofocus
    >
      <template #suffixIcon>
        <search-outlined />
      </template>
      <template v-if="fetching" #notFoundContent>
        <a-spin size="small" />
      </template>
    </a-select>

    <a-tooltip v-else>
      <template #title>{{ l('Search') }}</template>
      <svg class="icon icon-header" aria-hidden="true" @click="isSearchShow = !isSearchShow">
        <use xlink:href="#gctsousuo1"></use>
      </svg>
    </a-tooltip>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { AppComponentBase, UserServiceProxy } from '/@/shared';
  import { useRouter } from 'vue-router';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { getMenus } from '/@/router/menus';
  import { Menu } from '/@/router/types';

  export default defineComponent({
    name: 'LayoutMenu',
    mixins: [AppComponentBase],
    components: {
      SearchOutlined,
      VNodes: (_, { attrs }) => {
        return attrs.vnodes;
      },
    },

    data() {
      return {
        /**
         * 当前在线用户数
         */
        onlineUserCount: 0,
        timer: '',
        selectedValue: null,
        data: [] as any[],
        dropdown: false,
        list: [] as any[],
        placeholder: this.l('Pages.Common.QuickNavigation'),
        dataSource: [] as any[],
        tmpModel: '',
        userSer: new UserServiceProxy(),
        _list: [] as any[],
        router: useRouter(),
        fetching: false,
        isSearchShow: true,
      };
    },
    beforeUnmount() {
      clearInterval(this.timer as any);
    },
    created() {
      this.getMenus();
    },
    methods: {
      blur() {
        this.isSearchShow = true;
      },
      /** 注册菜单书信事件 */
      registerEvent() {
        abp.event.on('reFreshMenu', () => {
          this.getMenus();
        });
      },
      /** 获取菜单 */
      getMenus() {
        getMenus().then((res) => {
          this.scan(res as any);
          this._list = Object.create(this.list);
          this.handleSearch('');
        });
      },
      scan(obj: Menu[]): void {
        if (!obj) {
          return;
        }

        for (let item of obj) {
          if (this.isGranted(item.meta?.permission as string) || !item.meta?.permission) {
            if (item?.children == undefined || item?.meta?.hideChildrenInMenu == true) {
              this.list.push(item);
            } else if (
              item?.children &&
              item?.children.length > 0 &&
              !item?.meta?.hideChildrenInMenu
            ) {
              this.scan(item.children);
            }
          }
        }
      },
      /** 搜索 */
      handleSearch(value = ''): void {
        let query = value;
        this.list = [];
        this.fetching = true;
        const _result = this._list.filter((o) => {
          let result = false;
          if (o.type === 'Group') {
            return result;
          }
          if (o.title) {
            result = o.title.includes(query);
          }
          if (!result && o.code) {
            result = o.code.includes(query);
          }
          return result;
        });
        const data = _result.map((route) => ({
          label: route.title,
          value: route.path,
        }));
        setTimeout(() => {
          this.fetching = false;
          this.list = data;
        }, 150);
      },
      /** 跳转到对应路由 */
      onSelect(event: any): void {
        if (!event) {
          return;
        }
        this.selectedValue = null;
        this.handleSearch('');
        this.router.push(event);
        this.isSearchShow = !this.isSearchShow;
      },
    },
  });
</script>

<style lang="less" scoped>
  .OnlineUserCount {
    padding: 10px 24px 0 24px;
  }

  .highLight {
    color: #1890ff;
  }

  .menu-search-box {
    padding: 8px 16px;
  }

  :deep(.ant-select-clear) {
    background: transparent;
  }

  .ant-select-arrow {
    background: transparent;
  }

  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: #007bff;
  }
  .menu-search {
    margin-right: 10px;
  }
</style>
